// 书写打包规则
// 0. 导入 gulp 第三方
const gulp = require('gulp')
// 1. 导入一个 gulp-cssmin 第三方, 用于压缩 css 文件
const cssmin = require('gulp-cssmin')
// 1-2. 导入一个 gulp-autoprefixer 第三方, 用于自动添加 css 前缀
const autoprefixer = require('gulp-autoprefixer')
// 3. 导入一个 gulp-uglify 第三方, 用于压缩 js 文件
const uglify = require('gulp-uglify')
// 3-2. 导入一个 gulp-babel 第三方, 用于转码 ES6
const babel = require('gulp-babel')
// 4. 导入一个 gulp-htmlmin 第三方, 用于压缩 html 文件
const htmlmin = require('gulp-htmlmin')
// 4-2. 导入一个 gulp-file-include 第三方, 用于进行 html 组件组装
const fileInclude = require('gulp-file-include')
// 5. 导入一个 del 第三方, 用于删除文件夹使用
const del = require('del')
const cssHandler = () => {
    // 依赖 gulp 内提供的方法进行书写
    return gulp
      .src('./src/css/*.css') // 作用: 找到需要打包的源文件
      .pipe(autoprefixer()) // 本环节进行自动添加前缀
      .pipe(cssmin()) // pipe 推到下一个环节, 本环节进行压缩操作
      .pipe(gulp.dest('./dist/css/')) // 本环节进行存放压缩完毕的代码
  }
const jsHandler = () => {
    return gulp
      .src('./src/js/*.js')
      .pipe(babel({ presets: [ '@babel/preset-env' ] })) // 本环节进行 ES6 转 ES5
      .pipe(uglify()) // 本环节进行压缩操作
      .pipe(gulp.dest('./dist/js/')) // 本环节进行存放压缩完毕的代码
  }
  const htmlHandler = () => {
    return gulp
      .src('./src/views/*.html')
      .pipe(fileInclude({ // 本环节把组件全部组装完毕
        basepath: './src/components/', // 你存放组件的目录
        prefix: '@-@', // 你自定义的一个标识符, 用于将来在 html 文件内使用的
      }))
      .pipe(htmlmin({ // 本环节进行压缩操作
        collapseWhitespace: true, // 删除空白
        collapseBooleanAttributes: true, // 去除布尔类型属性
        removeAttributeQuotes: true, // 移除双引号
        removeComments: true, // 移除注释
        removeEmptyAttributes: true, // 移除空属性
        removeScriptTypeAttributes: true, // 移除 script 标签的默认 type 属性
        removeStyleLinkTypeAttributes: true, // 移除 style 和 link 标签的 type 属性
        minifyCSS: true, // 压缩内嵌式 css 代码
        minifyJS: true, // 压缩内嵌式 js 代码
      }))
      .pipe(gulp.dest('./dist/views')) // 本环节进行存放压缩完毕的代码
  }
  const imgHandler = () => {
    return gulp
      .src('./src/images/**.*')
      .pipe(gulp.dest('./dist/images/'))
  }
  const delHandler = () => {
    return del([ './dist/' ])
  }
  const _default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler, htmlHandler, jsHandler, imgHandler),
  )
  const watchHandler = () => {现
    gulp.watch('./src/views/*.html', htmlHandler)
    gulp.watch('./src/css/*.css', cssHandler)
    watchHandler
  }
  
  
  // 要在当前文件内对书写好的 任务函数进行导出
  module.exports = {
    cssHandler,
    jsHandler,
    htmlHandler,
    imgHandler,
    delHandler,
    watchHandler,
    default: _default
  }